<template>
<div>
  <div>
    <DatePicker type="date" placeholder="Select date" style="width: 200px"  format="yyyy-MM-dd" @on-change="one"></DatePicker>
  </div>
  <div class="demo-upload-list" v-for="item in uploadList" :key="item.size">
    <img :src="item.url">
    <div class="demo-upload-list-cover">
      <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
      <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
    </div>
  </div>
  <div style="width: 100px;height: 100px;">
    <Upload
      ref="upload"
      :show-upload-list="false"
      :on-success="handleSuccess"
      type="drag"
      action="//dlqt.juyouhx.com/Api/Api/ObjectToOss"
      start-date="2019-10-13"
      style="display: inline-block;width:58px;">
      <div style="width: 58px;height:58px;line-height: 58px;">
        <Icon type="ios-camera" size="20"></Icon> 22
      </div>
    </Upload>
    <Modal title="View Image" v-model="visible">
      <img :src="url" v-if="visible" style="width: 100%">
    </Modal>
  </div>
  <div>
    <Button type="primary" @click="test1">post请求测试1</Button>
  </div>
 <div style="margin-top: 50px">
   <Button type="primary" @click="test2">post请求测试2</Button>
 </div>
</div>
</template>
<script>
import { createPost } from '@/api/post'
export default {
  name: 'index',
  data () {
    return {
      ss: [],
      url: '',
      visible: false,
      uploadList: []
    }
  },
  methods: {
    one (value) {
      console.log(value, 'date')
      this.ss = value
    },
    test2 () {
      let data = {
        apiName: 'sq4jycyz',
        aac058: '01',
        aac002: '210782199810132412',
        aac003: '于淼',
        aac004: '1',
        aac005: '11',
        aac006: this.ss,
        aac011: '31',
        aac017: '2',
        aac024: '03',
        aac033: '1',
        aac009: '21',
        aac010: '辽宁省北镇市大罗罗堡镇大白屯村800号',
        aab299: '210106000000',
        aac186: '1998-10-13',
        aac046: '210106000000',
        bab305: '210106000000',
        aac0m3: '1',
        aac0m7: '否',
        adc310: '否',
        acc0mg: this.url,
        acc0mh: '1998-10-13',
        aae019: '于淼',
        aae020: '民政局',
        aae022: '210106000000',
        aae036: '2019-10-06 10:10:10'
      }
      console.log(data)
      createPost(data).then(res => {
        console.log(res)
        console.log(res.data.data)
      })
    },
    handleSuccess (file) {
      console.log(file)
      this.uploadList.push(file)
      // this.uploadList = this.file
    },
    test1 () {
      let data = {
        apiName: 'sq4jycyznj',
        acc0m1: '2101992019099744',
        aac182: '2019-11-13',
        aae001: '2019',
        aac18a: '符合规定审验通过',
        aac18b: '沈阳市人力资源社会保障局',
        aac18c: '张明',
        aae013: '审验合格',
        aae011: '123456789',
        aae017: '123456789',
        aae019: '李丽',
        aae020: '沈阳市人力资源社会保障局',
        aae022: '210199000000'
      }
      console.log(data)
      createPost(data).then(res => {
        console.log(res)
        console.log(res.data.data)
        console.log(111)
      })
    },
    handleView (url) {
      this.url = url
      this.visible = true
    },
    handleRemove (file) {
      const fileList = this.uploadList
      this.uploadList.splice(fileList.indexOf(file), 1)
    }
  }
}
</script>

<style scoped>
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
    display: block;
  }
  .demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
</style>
